<template>
  <div class="bg-neutral rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-shadow">
    <div class="p-5">
      <div class="flex justify-between items-center mb-3">
        <span class="px-3 py-1 bg-primary/10 text-primary text-sm rounded-full">{{ category }}</span>
        <span class="text-sm text-gray-500">{{ style }}</span>
      </div>
      <h3 class="font-bold text-lg mb-3">{{ title }}</h3>
      <p class="text-gray-600 text-sm mb-4 line-clamp-3">
        {{ description }}
      </p>
    </div>
    <div class="comic-border bg-white">
      <img :src="image" :alt="`${title}漫画示例`" class="w-full h-auto">
    </div>
    <div class="p-5 pt-4">
      <button class="w-full py-2 border border-primary text-primary rounded-lg hover:bg-primary/5 transition-colors">
        用这个风格生成
      </button>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  category: String,
  style: String,
  title: String,
  description: String,
  image: String
})
</script>